<template>
    <view class="content">
			<view class="title" :style="{paddingTop: marginTop+'px'}">
			 <u-icon name="arrow-left" @click="nav()" class="returnPage" color="#333" size="40rpx"></u-icon> 
				 <text class="text">测评内容</text>
			</view> 
			<view class="describe" :style="{opacity: index>=2?1:0}">
				{{problemList[index].title}}
			</view>
			<view class="card_topic">
				<cardCut @pageTurning="pageTurning"  @createCustomization="createCustomization" :cardInfoList="problemList"></cardCut>
			</view>
        
				<view class="schedule">
					<u-line-progress :percentage="percentage" :showText="false" activeColor="#F9CC68" height="24rpx"></u-line-progress>
				</view>
				
    </view>
</template>

<script>
    import cardCut from '@/components/cardCut/cardCut.vue'
    export default {
        data() {
            return {
                marginTop:0,
								problemList:[],
								cardInfoList: [{
									name: 1 
								}, {
									name: 2
								}, {
									name: 3
								}, {
									name: 4
								}],
								index:0,
								percentage:0
            }
        },
        components: {
            cardCut
        },
				onLoad() {
					this.marginTop = uni.getMenuButtonBoundingClientRect().top
					this.$myRuquest('home/custom/quest_list').then(res=>{
						let data=res.data
						data.forEach(item=>{
							item.topic=[]
							item.desc.forEach((items,index1)=>{
								item.topic.push({
									title:items,
									subhead:item.desc_s[index1],
									id:item.id,
									opt:false
								})
							})
						})
						this.problemList=data
						this.percentage=(1/this.problemList.length)*100
					})
				},
        methods: {
					createCustomization(data){
						this.$myRuquest('home/custom/custom_save',data,'POST').then(res=>{
							uni.redirectTo({
								url:'../customizationScheme?data='+encodeURIComponent(JSON.stringify(res.data))
							})
						})
					},
           pageTurning(e){
						 this.index=e-1
						 this.percentage=(e/this.problemList.length)*100
					 },
					 nav(){
						 uni.navigateBack({
						 	delta: 1
						 });
					 }
        }
    }
</script>
 
<style lang="scss" scoped>
	.describe{
		text-align: center;
		font-size: 34upx;
		font-weight: 700;
		margin-top: 60upx;
	}
	.content{
		// height: 100vh;
		min-height: 100vh;
		// padding-bottom: 40upx;
		background-image: linear-gradient(to bottom,#F9CC68,#F9E6A1);
		.title{
			text-align: center;
			font-size: 36upx;
			color: #333333;
			position: relative;
			display: flex;
			padding: 0 20upx;
			
			.returnPage{
				position: absolute;
				top: 10upx;
				left: 40upx;
			}
			.text{
				position: absolute;
				left: 50%;
				transform: translateX(-50%);		
			}
		}
		.card_topic{ 
			width: calc(100% - 80upx);
			height: 1200upx;
			margin: 0 40upx;
		}
		.schedule{
			background-color: #fff;
			height: 24upx;
			padding: 8upx 12upx;
			width: calc(100% - 160upx);
			margin: 0 80upx;
			border-radius: 24upx;
			align-items: center;
		}
	}
</style>